<template>
	<!-- 注册  register -->
	<view class="register" :style="{height: Wheight + 'px'}">
		<view class="register-backgeound">
			<view class="box-size">
				<view class="phone border-bottom">
					<view class="black-line">
						<view class="image">
							<image class="icon" src="/static/images/phone.png" mode=""></image>
						</view>
						<input 
							type="number" 
							placeholder="手机号码" 
							v-model="phoneNumber" 
							placeholder-class="pstyle"
						/>
					</view>
				</view>
				
				<view class="verification border-bottom">
					<view class="black-line">
						<view class="image">
							<image class="icon" src="/static/images/graph-icon.png" mode=""></image>
						</view>
						<input 
							type="text" 
							placeholder="图形验证码" 
							v-model="verCode"
							placeholder-class="pstyle"
						/>
						<view class="canvas-img-code" @click="refresh()">
							<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas" @error="canvasIdErrorCallback"></canvas>
						</view>
					</view>
				</view>
				
				<view class="code border-bottom">
					<view class="black-line">
						<view class="image">
							<image class="icon" src="/static/images/password.png" mode=""></image>
						</view>
						<input 
							type="number" 
							placeholder="手机验证码" 
							v-model="phoneCode" 
							placeholder-class="pstyle"
						/>
						<button 
							class="sendCode" 
							type="primary"
							:disabled="codeStatus"
							@click="sendCode"
						>{{ codeStatusText }}</button>
					</view>
				</view>
				
				<view class="register-in">
					<!-- 注册按钮 -->
					<wButton text="注 册" :rotate="isRotate" @click.native="registerClick()"></wButton>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import wButton from '@/components/register/watch-button.vue'
	export default {
		
		name: 'register',
		data() {
			return {
				Wheight: '', //可视区域高度
				phoneNumber: '', //手机号码
				verCode: "", //图形验证码
				phoneCode: '',  //手机验证码
				codeStatusText: '获取', //手机验证码当前状态   （获取 / 等待中（60s）/ 重新发送）
				codeStatus: false, //发送验证码 按钮当前状态（true是禁用状态）
				isRotate: false, //注册按钮是否加载旋转特效
				width: 120, //图形验证码 宽高
				height: 45, 
				cleanTime: '',
				downTime: 60,
				
			}
		},
		components: {
			wButton
		},
		onLoad() {
			this.Wheight = this.$store.state.ContentHeight-44;
		},
		computed:{
			register() {
				return this.phoneNumber && this.verCode&&this.phoneCode == '';
			}
		},
		onShow() {
			_this = this;
			setTimeout(function() {
				_this.init();
			}, 1000)
		},
		methods: {
			// 初始化验证码
			init() {
				console.log('start');
				var context = uni.createCanvasContext('imgcanvas', this),
					w = this.width,
					h = this.height;
				context.setFillStyle("white");
				context.setLineWidth(5);
				context.fillRect(0, 0, w, h);
				var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "I", "M", "N", "O", "P", "Q", "R", "S",
						"T", "U", "V", "W", "S", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
					],
					str = '';
				for (var i = 0; i < 4; i++) {
					var c = pool[this.rn(0, pool.length - 1)];
					var deg = this.rn(-30, 30);
					context.setFontSize(18);
					context.setTextBaseline("top");
					context.setFillStyle(this.rc(80, 150));
					context.save();
					context.translate(30 * i + 15, parseInt(h / 1.5));
					context.rotate(deg * Math.PI / 180);
					context.fillText(c, -15 + 5, -15);
					context.restore();
					str += c;
				}
				uni.setStorage({
					key: 'imgcode',
					data: str,
				});
				for (var i = 0; i < 40; i++) {
					context.beginPath();
					context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
					context.closePath();
					context.setFillStyle(this.rc(150, 200));
					context.fill();
				}
				context.draw();
				console.log('end');
			},
			rc: function(min, max) {
				var r = this.rn(min, max);
				var g = this.rn(min, max);
				var b = this.rn(min, max);
				return "rgb(" + r + "," + g + "," + b + ")";
			},
			rn(max, min) {
				return parseInt(Math.random() * (max - min)) + min;
			},
			refresh() {
				this.init();
			},
			canvasIdErrorCallback(e) {
				console.error(e.detail.errMsg)
			},
			//注册
			registerClick() {
				if (this.phoneNumber.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				
				if (this.verCode.length != 4) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '验证码不正确'
					});
					return false;
				}
				if (this.verCode.toLowerCase() != uni.getStorageSync('imgcode').toLowerCase()) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '验证码不正确'
					});
					return false;
				}
				
				_this.isRotate = true;
				this.password = this.phoneNumber.substr(0,4);
				console.log(this.password)
				const params = {
					username: this.phoneNumber,
					mobile: this.phoneNumber,
					password: '123123',
					email: '',
					code: ''
					
				}
				this.$post(this.api.register, params).then((res) => {
					console.log(res);
					setTimeout(function() {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '注册成功'
						});
						
						_this.isRotate = false
					}, 2000)
				}).catch((err) => {
					console.log(err)
				})
			},
			// 发送手机验证码
			sendCode() {
			this.downTime = 60;
				this.cleanTime = setInterval(() => {
					this.downTime--;
					this.codeStatusText = `获取（${this.downTime} )`;
					this.codeStatus = true;
					if(this.downTime == 0) {
						this.codeStatus = false;
						this.codeStatusText = '获取'
						clearInterval(this.cleanTime)
					}
				},1000)
				
				
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url('@/static/style/common.less');
	.flex{
		display: flex;
	}
	.register{
		width: 100%;
		height: 100%;
		position: relative;
		background: #5696F8;
		.register-backgeound{
			width: 740rpx;
			height: 1160rpx;
			background: url(../../static/images/register-ridus.png)no-repeat;
			background-size: 100%;
			margin: auto;
			.box-size{
				width: 587rpx;
				margin: auto;
				padding: 50rpx 0;
				.border-bottom{
					width: 100%;
					border-bottom: 1px solid #E5E5E5;
					margin-top: 80rpx;
					.black-line{
						.flex;
						align-items: center;
						padding-left: 42rpx;
						margin-bottom: 25rpx;
						.image{
							width: 40rpx;
							text-align: center;
							margin-right: 36rpx;
							.icon{
								width: 30rpx;
								height: 40rpx;
								
							}
						}
						input{
							font-size: 34rpx;
							width: 400rpx;
							outline: none;
							border: none;
						}
						.eye{
							width: 40rpx;
							height: 30rpx;
							margin-left: auto;
							margin-right: 15rpx;
						}
						.graph{
							width: 203rpx;
							height: 76rpx;
							margin-left: auto;
							margin-right: 15rpx;
						}
						.sendCode{
							width: 300rpx;
							height: 75rpx;
							line-height: 75rpx;
						}
						.pstyle{
							color:#cccccc;
						}
					}
				}
				.verification{
					.image{
						width: 40rpx;
						text-align: center;
						image{
							width: 40rpx!important;
							height: 33rpx!important;
						}
						
					}
					input{
						width: 250rpx!important;
					}
				}
				.code{
					.image{
						width: 40rpx;
						text-align: center;
						image{
							width: 32rpx!important;
							height: 40rpx!important;
						}
						
					}
				}
				.register-in{
					margin-top: 49rpx;
					button{
						.custom-button;
					}
				}
				.other{
					.flex;
					padding: 0 25rpx;
					justify-content: space-between;
					margin-top: 30rpx;
					text{
						color: #999999;
						font-size: 30rpx;
					}
				}
				
			}
		}
		
	}
</style>
